<template>
	<div class="pages">
		<div class="search">
			<van-search background="#4674C9" @click-right-icon="searchLists" v-model="search" left-icon="" right-icon="search"
				placeholder="请输入搜索关键词" />
		</div>
		<div class="select">
			<van-dropdown-menu active-color="#4674C9">
				<van-dropdown-item :title="state.select.taskStatus.text" ref="taskStatusDom">
					<van-tree-select @click-item="treeSelect" @click-nav="treeClick" v-model:active-id="state.select.taskStatus.activeId"
						v-model:main-active-index="state.select.taskStatus.activeIndex" :items="state.select.taskStatus.items" />
				</van-dropdown-item>
				<van-dropdown-item @change="taskTypeChange" v-model="state.select.taskType.value"
					:options="state.select.taskType.options">
				</van-dropdown-item>
				<van-dropdown-item @change="sortChange" v-model="state.select.sort.value" :options="state.select.sort.options">
				</van-dropdown-item>
			</van-dropdown-menu>
		</div>
		<div class="lists">
			<van-pull-refresh class="pull-refresh" v-model="lists.refresh.loading" @refresh="onRefresh">
				<van-list v-model:loading="lists.more.loading" :finished="lists.more.finished" finished-text="没有更多了"
					@load="onLoad">
					<div class="item" @click="toDetail(item)" v-for="(item, idx) in lists.lists" :key="idx">
						<p class="title" v-text="item.reportTitle || '暂无标题'"></p>
						<p class="task-type" v-text="`上报类型：${dictFormat(item.reportType)}`"></p>
						<p class="department" v-text="`接收单位：${item.receiveDeptName || '暂无单位'}`"></p>
						<p class="date" v-text="`接收时间：${item.reportTime || '暂无时间'}`"></p>
						<div :class="{ 'label': true, 'label-color-blue': item.receiveStatus == '1', 'label-color-green': item.receiveStatus == '2' }" v-text="formatStatus(item.receiveStatus)"></div>
					</div>
				</van-list>
			</van-pull-refresh>
		</div>
	</div>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { dictinfo, platformReportInfoPage } from '@/api/reportpreview'
import { Page } from '@/api/types/public'
import { dateFormat } from '@/utils/utils'
import { stat } from 'fs'

const router = useRouter();
// 搜索
const search = ref('');

const state = reactive({
	select: {
		taskStatus: {
			text: '上报发起',
			activeId: '',
			activeIndex: 0,
			items: [
				{
					text: '上报发起',
					children: [] as any,
				},
				{
					text: '重置'
				},
			]
		},
		taskType: {
			value: '',
			options: [{
				text: '目标类型',
				value: ''
			}, {
				text: '提交',
				value: '0'
			}, {
				text: '执行中',
				value: '1'
			}, {
				text: '已结束',
				value: '2'
			}]
		},
		sort: {
			value: '',
			options: [{
				text: '默认排序',
				value: ''
			}, {
				text: '倒序',
				value: 'desc'
			}, {
				text: '正序',
				value: 'aesc'
			}]
		},
		pages: {
			page: 1,
			size: 10
		} as Page
	}
})

const lists = reactive({
	refresh: {
		loading: false
	},
	more: {
		loading: false,
		finished: false
	},
	lists: [] as any
})

//字典查询
const initDict = async (dictCode: string, field: { value: string, text:string }, callback: Function) => {
	const res = await dictinfo(dictCode)

	const children = res.data.map((item: any) => {
		item[field.value] = item.dictCode
		item[field.text] = item.dictName
		return item
	})

	callback(children)
}

// 字典回显
const dictFormat = (code: any) => {
	const tempDict = (() => {
		let temp = [] as any
		state.select.taskStatus.items.map((item) => {
			Array.isArray(item.children) && temp.push(...item.children)
		})
		return temp
	})()
	const item = tempDict?.find((item: any) => {
		return code === item.id
	}) as any
	return item ? item.text : code
}

// 下拉刷新回调
const onRefresh = () => {
	// 清空列表数据
	lists.more.finished = false
	state.select.pages.page = 1
	// 重新加载数据
	// 将 loading 设置为 true，表示处于加载状态
	lists.more.loading = true
	onLoad();
}

const formatStatus = (status:any) => {
	switch(status) {
		case '0':
			return '提交';
		case '1':
			return '执行中';
		case '2':
			return '已结束';
		default:
			return status || ''
	}
}

// 加载更多回调
const onLoad = async () => {
	const params = {
		reportTitle: search.value,
		reportType: state.select.taskStatus.activeId,
		platformType: state.select.taskType.value,
		orderBy: state.select.sort.value, // 排序
		page: state.select.pages.page,
		size: state.select.pages.size
	}
	try {
		const res = await platformReportInfoPage(params)
		let temp = res.data.records
		if (lists.refresh.loading) {
			lists.lists = [];
			lists.refresh.loading = false;
		}
		lists.lists.push(...temp);
		lists.more.loading = false;

		state.select.pages.page ++

		if (!temp.length) {
			lists.more.finished = true;
		} else {
			lists.more.finished = false;
		}
	} catch (error: any) {
		if(error.data.code === 500) {
			lists.refresh.loading = false;
			lists.more.loading = false;
			lists.more.finished = true;
		}
	}
}

const taskStatusDom = ref();

// 任务指令选中回调
const searchLists = () => {
	lists.refresh.loading = true
	onRefresh()
}

const treeClick = (index: number) => {
	if(index === 1) {
		state.select.taskStatus.activeId = ''
		state.select.taskStatus.text = '上报发起'
		taskStatusDom.value.toggle()
		lists.refresh.loading = true
		onRefresh()
	}
}

// 任务指令选中回调
const treeSelect = (item: any) => {
	state.select.taskStatus.text = item.text;
	taskStatusDom.value.toggle()
	lists.refresh.loading = true
	onRefresh()
}

const taskTypeChange = (value: any) => {
	lists.refresh.loading = true
	onRefresh()
}

const sortChange = (value: any) => {
	lists.refresh.loading = true
	onRefresh()
}

// 跳转详情页
const toDetail = (item:any) => {
	router.push({ path: '/reportpreview/reportapproval', query: {id: item.id, recordType: item.recordType}})
}

onMounted(() => {
	const format1 = { value: 'id', text: 'text' }
	const format2 = { value: 'value', text: 'text' }
	initDict('1008', format1, (children: Array<any>) => {
		state.select.taskStatus.items[0].children = children
	})
	initDict('1002', format2, (children: Array<any>) => {
		state.select.taskType.options = [{
				text: '目标类型',
				value: ''
			},
			...children
		]
	})
})
</script>
<style lang="scss" scoped>
.pages {
	height: 100%;
	display: flex;
	flex-direction: column;

	.search {}

	.select {
		&:deep(.van-dropdown-menu) {
			.van-dropdown-menu__bar {
				height: 40px;

				.van-dropdown-menu__item {
					.van-dropdown-menu__title {
						font-size: 10px;
						font-weight: bold;
						color: #181818;
					}
				}
			}

			.van-dropdown-item {
				.van-tree-select {
					.van-tree-select__nav {
						.van-sidebar-item--select {
							color: $primary-color;

							&::before {
								content: none;
							}
						}
					}

					.van-tree-select__content {
						.van-tree-select__item--active {
							color: $primary-color;
						}
					}
				}
			}
		}
	}

	.lists {
		flex: 1;
		height: 0;
		overflow-y: scroll;

		.pull-refresh {
			.van-list {
				box-sizing: border-box;
				padding: 9px;
				.item {
					background: #ffffff;
					border-radius: 5px;
					box-shadow: 0.5px 0.87px 4.5px 1px rgba(0, 0, 0, 0.05);
					padding: 18px 16px;
					margin-bottom: 9px;
					position: relative;

					&:last-child {
						margin-bottom: 0px;
					}

					.title {
						font-size: 14px;
						font-weight: bold;
						text-align: left;
						color: #181818;
						margin-bottom: 11px;
					}

					.task-type, .target-type, .department, .date {
						font-size: 10px;
						font-weight: bold;
						text-align: left;
						color: #646464;
						margin-bottom: 6px;
					}

					.label {
						position: absolute;
						right: 0;
						top: 0;
						width: 55px;
						height: 20px;
						border-top-right-radius: 5px;
						border-bottom-left-radius: 5px;
						display: flex;
						justify-content: center;
						align-items: center;
						font-size: 10px;
						font-weight: bold;
					}

					.label-color-blue {
						color: $primary-color;
						background-color: #F1F4FF;
					}
					.label-color-green {
						color: #07A43B;
						background-color: #E9FFEB;
					}
				}
			}
		}
	}
}
</style>